<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue';
import Draggable from "vuedraggable";
import { tmpList } from '../tmpList';
import { useLayoutStore } from '@/stores/useLayout';

const layoutComponents = reactive([])

const layoutStore = useLayoutStore()

const emit = defineEmits(["copy", 'remove'])
const tmpMap:any = {};
tmpList.forEach((item:any)=>{
  tmpMap[item.__name] = item
})

const commComponents = shallowRef(tmpMap)

const props = defineProps({
  tasks: {
    required: true,
    type: Array
  },
  style: {
    // required: true,
    type: Object,
    default: {}
  },
  direction: {
    type: String,
    default: 'row'
  }
})

const onDrag = (evt) => {
  window.console.log(evt);
  if (evt.added) {
    layoutComponents.push(evt.added.element)
  }
  else if (evt.moved) {
    swapItemsInArray(layoutComponents, evt.moved.oldIndex, evt.moved.newIndex)
  }

}

function swapItemsInArray(ary, oldIndex, newIndex) {
  if (oldIndex >= 0 && oldIndex < ary.length && newIndex >= 0 && newIndex < ary.length) {
    // 临时存储旧位置的元素
    let temp = ary[oldIndex];
    // 将新位置的元素移到旧位置
    ary[oldIndex] = ary[newIndex];
    // 将临时存储的元素放到新位置
    ary[newIndex] = temp;
  }
}

const onCopy = (item)=>{
  console.log('copy', item, props.tasks)
  emit('copy', item, props.tasks)
}

const onRemove = (item)=>{
  console.log('remove', item, props.tasks)
  // emit('remove', item, props.tasks)
  const n = props.tasks.indexOf(item);
  console.log("find index", n)
  props.tasks.splice(n,1)
}

const onChoose = (item)=>{
  console.log("choose", item)
  layoutStore.chooseItem(item);
}

const getItemStyle = (item)=>{
  const obj:any = {
    flex: item.style.flex || 1,
  };
  if(item.style.height){
    obj.height = item.style.height
  }
  return {...item.style, obj};
}

const getListStyle = ()=>{
  const obj:any = {
    flexDirection: props.direction
  }
  if(layoutStore.previewShow){
    obj.border = "none";
    obj.padding = 0;
  }
  return {...props.style, ...obj};
}

</script>

<script lang="ts">
export default {
  name: "nested-draggable"
};
</script>

<template>
    <draggable class="list" :class="{preview: layoutStore.previewShow }" :style="getListStyle()" item-key="id" :list="tasks" group="people"
      @change="onDrag">
      <template #item="{ element }">

        <div class="item" @click.stop="onChoose(element)" :style="getItemStyle(element)" 
        :class="{choose: element==layoutStore.curItem, preview: layoutStore.previewShow}">
          <div class="titles">
            <div class="i-name">{{ element.name }}</div>
            <img class="i-btn" src="/imgs/copy.svg" @click.stop="onCopy(element)"/>
            <img class="i-btn" src="/imgs/delete.svg" @click.stop="onRemove(element)"/>
          </div>
          <template v-if="element.type == 'layout'">
            <nested-draggable :tasks="element.tasks" :direction="element.direction" :style="element.style"/>
          </template>
          <template v-else>
            <component :is="commComponents[element.name]" 
            :title="element.data.title" :desc="element.data.desc" :img="element.data.img"
            :style="element.style" :titleStyle="element.titleStyle" :descStyle="element.descStyle"
            ></component>
          </template>
        </div>
      </template>
    </draggable>
</template>

<style lang="less" scoped>
.list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  // background: #f9f9f9;
  min-height: 100px;
  border: dashed 1px #82cff2;
  flex: 1 0 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  &.preview{
    margin: 0
  }
}

.item {
  // background: #f0f0f0;
  cursor: move;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  position: relative;
  &.preview{
    border: none !important;
    .titles{
      display: none;
    }
  }
}

.choose{
  border: solid 2px #ff0000;
}

.ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.titles {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  .i-name {
    // position: absolute;
    // left: 0;
    // top: 0;
    padding: 5px 5px 0;
    font-size: 12px;
    margin-right: auto;
    color: #999;
  }

  .i-btn {
    width: 16px;
    height: 16px;
    object-fit: contain;
    background: #fff;
    // border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
